<template>
  <div id="gC">
      <div id="gComments">
          <div style="margin-bottom: 12%">
            <span class="title">评论</span>
            <span class="more">撰写评论</span>
          </div>

          <div v-for="(i,index) in game.gameComments">
            <div class="topic">{{i.cTitle}}</div>
            <div class="userId">{{i.uName}}</div>
            <div class="text">{{i.cText}}</div>
          </div> 
      </div>
      
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
     game:{},
    }
  },
  mounted(){
          this.game=this.$store.state.game[this.$store.state.gameId];
          console.log(this.game.gameName);
        },
  methods: {
          
        }
 
}
</script>

<style>
#gC{
  padding-bottom: 15%;
}
#gComments{
    margin-top: 3%;
    width: 100%;
    padding-top: 1%;
}
#gC .title{
  position: absolute;
 font-size: 350%;
  left: 5%;
}
#gC .more{
  position: absolute;
  font-size: 250%;
  right:5%;
}

#gC .topic{
  font-size: 350%;
  text-align: left;
  width: 100%;
  margin-top: 5%;
  padding-left: 5%;
}
#gC .userId{
  font-size: 200%;
  text-align: left;
  width: 100%;
  margin-top: 3%;
  padding-left: 5%;
}
#gC .text{
  font-size: 250%;
  text-align: left;
  width: 100%;
  margin-top: 1%;
  padding-left: 5%;
  word-wrap: break-word;
  padding-bottom: 5%;
  border-bottom: 1px solid blue;
  padding-right:2%
}
</style>
